.links {
  display: flex;
  flex-wrap: wrap;
  font-size: .9rem;


  .item {
    position: relative;
    display: inline-flex;
    justify-self: center;
    align-items: center;
    line-height: 1.5;
    width: calc(50% - 2rem);
    padding: .5rem 1rem;
    margin: 1rem;
    the-transition();
    shadow-box();

    --bg-color: var(--block-color, #666);

    .image {
      display: block;
      width: 4rem;
      height: 4rem;
      border-radius: .9375rem;
      background: var(--grey-1) center no-repeat;
      background-size: contain;
      flex-shrink: 0;
      border: none;
    }

    .info {
      padding-left: 1rem;
    }

    .title {
      margin: .5rem 0;
      font-family: $font-family-title;
      font-weight: bold;
      color: var(--bg-color);
      border: none;
      .ic {
        display: none;
      }
    }

    .desc {
      font-size: $font-size-smallest;
      margin: .5rem 0;
    }


    &:hover {
      color: var(--header-text-color);
      background-color: var(--bg-color);
      box-shadow: 0 .125rem 1.25rem var(--bg-color);
      border-color: var(--bg-color);

      .image {
        mix-blend-mode: normal;
        background-color: var(--bg-color);
      }

      .title {
        color: var(--header-text-color);
      }
    }
  }


  +mobile() {
    font-size: $font-size-base;
    .item {
      width: calc(100% - 2rem);
    }
  }
}
